<template>
    <view class="pb-20">
        <image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
        <u-navbar title="产品检测单管理" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
            :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>

        <!-- 搜索和筛选区域 -->
        <view class="search-filter-box">
            <!-- 检测编号搜索 -->
            <view class="search-row">
                <u-search v-model="searchForm.detectionId" placeholder="请输入检测编号/实验室编号"
                    @search="handleSearch"></u-search>
            </view>

            <!-- 筛选条件 -->
            <view class="filter-row">
                <view class="filter-item">
                    <text class="filter-label">检测年份</text>
                    <view class="form-input" @click="showYearPicker = true">
                        <text>{{ searchForm.year || '选择年份' }}</text>
                        <u-icon name="calendar" size="16" color="#999" />
                    </view>
                </view>

                <view class="filter-item">
                    <text class="filter-label">检测类型</text>
                    <view class="form-input" @click="showTypePicker = true">
                        <text>{{ searchForm.type || '全部' }}</text>
                        <u-icon name="arrow-down" size="16" color="#999" />
                    </view>
                </view>

                <view class="filter-item">
                    <text class="filter-label">检测地区</text>
                    <view class="form-input" @click="showAreaPicker = true">
                        <text>{{ searchForm.area || '请选择省/市/区县' }}</text>
                        <u-icon name="arrow-down" size="16" color="#999" />
                    </view>
                </view>

                <view class="filter-item">
                    <text class="filter-label">样品</text>
                    <view class="form-input" @click="showSamplePicker = true">
                        <text>{{ searchForm.sample || '请选择样品' }}</text>
                        <u-icon name="arrow-down" size="16" color="#999" />
                    </view>
                </view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons">
                <u-button size="small" type="primary" @click="handleSearch"
                    :customStyle="{ background: '#0A993B', borderColor: '#0A993B', color: '#fff' }">查询</u-button>
                <u-button size="small" @click="handleReset"
                    :customStyle="{ background: '#fff', borderColor: '#0A993B', color: '#0A993B' }">重置</u-button>
            </view>
        </view>

        <!-- 检测记录列表 -->
        <scroll-view class="detection-list" scroll-y="true">
            <view class="detection-card" v-for="(item, index) in filteredList" :key="index">
                <view class="card-header">
                    <view class="card-title">
                        <text class="detection-id">{{ item.detectionId }}</text>
                        <text class="lab-id">{{ item.labId }}</text>
                        <text class="organization">{{ item.organization }}</text>
                    </view>
                    <view class="status-tag" :class="item.status">
                        <text>{{ item.statusText }}</text>
                    </view>
                </view>

                <view class="card-content">
                    <view class="content-left">
                        <view class="info-row">
                            <text class="label">检测类别:</text>
                            <text class="value">{{ item.detectionCategory }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">检测场所:</text>
                            <text class="value">{{ item.detectionLocation }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">样品名称:</text>
                            <text class="value">{{ item.sampleName }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">品种:</text>
                            <text class="value">{{ item.variety }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">检测数量:</text>
                            <text class="value">{{ item.detectionQuantity }}</text>
                        </view>
                    </view>

                    <view class="content-right">
                        <view class="info-row">
                            <text class="label">检测地点:</text>
                            <text class="value">{{ item.detectionLocation }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">是否超期:</text>
                            <text class="value" :class="item.isOverdue ? 'overdue' : 'normal'">{{ item.overdueText
                                }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">状态:</text>
                            <text class="value" :class="item.submitStatus ? 'normal' : 'overdue'">{{
                                item.submitStatusText }}</text>
                        </view>
                        <view class="info-row">
                            <text class="label">提交时间:</text>
                            <text class="value" :class="item.submitTime ? 'normal' : 'overdue'">{{ item.submitTime ||
                                '未提交' }}</text>
                        </view>
                    </view>
                </view>

                <view class="card-footer">
                    <text class="timestamp">{{ item.timestamp }}</text>
                    <view class="card-actions">
                        <u-button size="mini" type="primary" plain @click="viewDetails(item)">详情</u-button>
                        <u-button size="mini" type="success" plain @click="viewDetection(item)">检测信息</u-button>
                        <u-button size="mini" type="error" plain @click="handleDelete(item)">删除</u-button>
                    </view>
                </view>
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-if="filteredList.length === 0">
                <u-empty mode="data" icon="data"></u-empty>
            </view>
        </scroll-view>

        <!-- 选择器 -->
        <u-picker :show="showYearPicker" :columns="[yearOptions]"
            :defaultIndex="[yearOptions.indexOf(new Date().getFullYear().toString())]" @confirm="onYearConfirm"
            @cancel="showYearPicker = false" @close="showYearPicker = false" />
        <u-picker :show="showTypePicker" :columns="[typeOptions]" @confirm="onTypeConfirm"
            @cancel="showTypePicker = false" @close="showTypePicker = false" />
        <u-picker :show="showAreaPicker" :columns="[areaOptions]" @confirm="onAreaConfirm"
            @cancel="showAreaPicker = false" @close="showAreaPicker = false" />
        <u-picker :show="showSamplePicker" :columns="[sampleOptions]" @confirm="onSampleConfirm"
            @cancel="showSamplePicker = false" @close="showSamplePicker = false" />
    </view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
    data() {
        return {
            searchForm: {
                detectionId: '',
                year: '',
                type: '',
                area: '',
                sample: ''
            },
            showYearPicker: false,
            showTypePicker: false,
            showAreaPicker: false,
            showSamplePicker: false,
            yearOptions: (() => {
                const currentYear = new Date().getFullYear()
                const years = []
                for (let i = currentYear + 20; i >= currentYear - 20; i--) {
                    years.push(i.toString())
                }
                return years
            })(),
            typeOptions: ['全部', '监督检测', '评价性检测', '风险监测'],
            areaOptions: ['全部', '山东省/济南市/历下区', '山东省/青岛市/市南区', '山东省/烟台市/芝罘区'],
            sampleOptions: ['全部', '苹果', '梨', '桃', '葡萄', '樱桃'],
            list: [
                {
                    detectionId: 'JC2024001',
                    labId: 'LAB001',
                    organization: '山东省自然资源厅',
                    detectionCategory: '监督检测',
                    detectionLocation: '个人果园',
                    sampleName: '苹果',
                    variety: '红富士',
                    detectionQuantity: '4.0 (kg)',
                    isOverdue: false,
                    overdueText: '未超期',
                    submitStatus: true,
                    submitStatusText: '已提交',
                    submitTime: '2024-05-03 11:08',
                    status: 'qualified',
                    statusText: '合格',
                    timestamp: '2024-05-10 9:15:23'
                },
                {
                    detectionId: 'JC2024002',
                    labId: 'LAB002',
                    organization: '山东省自然资源厅',
                    detectionCategory: '监督检测',
                    detectionLocation: '个人果园',
                    sampleName: '苹果',
                    variety: '红富士',
                    detectionQuantity: '4.0 (kg)',
                    isOverdue: true,
                    overdueText: '已超期',
                    submitStatus: false,
                    submitStatusText: '未提交',
                    submitTime: '',
                    status: 'unknown',
                    statusText: '未知',
                    timestamp: '2024-05-10 9:15:23'
                }
            ]
        }
    },
    computed: {
        filteredList() {
            return this.list.filter(item => {
                // 检测编号搜索
                if (this.searchForm.detectionId && this.searchForm.detectionId.trim()) {
                    const searchText = this.searchForm.detectionId.toLowerCase()
                    if (!item.detectionId.toLowerCase().includes(searchText) && 
                        !item.labId.toLowerCase().includes(searchText)) {
                        return false
                    }
                }
                
                // 年份筛选
                if (this.searchForm.year && item.timestamp && !item.timestamp.includes(this.searchForm.year)) {
                    return false
                }
                
                // 检测类型筛选
                if (this.searchForm.type && this.searchForm.type !== '全部' && item.detectionCategory !== this.searchForm.type) {
                    return false
                }
                
                // 地区筛选
                if (this.searchForm.area && this.searchForm.area !== '全部' && !item.detectionLocation.includes(this.searchForm.area.split('/')[0])) {
                    return false
                }
                
                // 样品筛选
                if (this.searchForm.sample && this.searchForm.sample !== '全部' && item.sampleName !== this.searchForm.sample) {
                    return false
                }
                
                return true
            })
        }
    },
    methods: {
        handleSearch() {
            console.log('执行搜索', this.searchForm)
        },
        handleReset() {
            this.searchForm = {
                detectionId: '',
                year: '',
                type: '',
                area: '',
                sample: ''
            }
        },
        onYearConfirm(e) {
            this.searchForm.year = e.value[0]
            this.showYearPicker = false
        },
        onTypeConfirm(e) {
            this.searchForm.type = e.value[0]
            this.showTypePicker = false
        },
        onAreaConfirm(e) {
            this.searchForm.area = e.value[0]
            this.showAreaPicker = false
        },
        onSampleConfirm(e) {
            this.searchForm.sample = e.value[0]
            this.showSamplePicker = false
        },
        viewDetails(item) {
            uni.showToast({
                title: `查看${item.detectionId}详情`,
                icon: 'none'
            })
        },
        viewDetection(item) {
            uni.showToast({
                title: `查看${item.detectionId}检测信息`,
                icon: 'none'
            })
        },
        handleDelete(item) {
            uni.showModal({
                title: '确认删除',
                content: `确定要删除检测单 ${item.detectionId} 吗？`,
                success: (res) => {
                    if (res.confirm) {
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.search-filter-box {
    background: #fff;
    padding: 20rpx;
}

.search-row {
    margin-bottom: 30rpx;
}

.filter-row {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    margin-bottom: 20rpx;
}

.filter-item {
    display: flex;
    align-items: center;
    
    .filter-label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
    }
    
    .form-input {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8f9fa;
        padding: 12rpx;
        border-radius: 12rpx;
        color: #333;
        font-size: 28rpx;
    }
}

.action-buttons {
    display: flex;
    gap: 20rpx;
    
    .u-button {
        flex: 1;
        
        &:first-child {
            background: #0A993B;
            border-color: #0A993B;
        }
    }
}

.detection-list {
    padding: 0 20rpx;
    height: calc(100vh - 700rpx);
    margin-top: 20rpx;
    
    .detection-card {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
    .detection-id {
        font-size: 32rpx;
        font-weight: 600;
        color: #0A993B;
        margin-right: 20rpx;
    }
    
    .lab-id {
        font-size: 28rpx;
        color: #666;
        margin-right: 20rpx;
    }
    
    .organization {
        font-size: 28rpx;
        color: #666;
    }
}

.status-tag {
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    
    &.qualified {
        background: #e8f5e8;
        color: #0A993B;
    }
    
    &.unknown {
        background: #f5f5f5;
        color: #999;
    }
}

.card-content {
    display: flex;
    gap: 40rpx;
    margin-bottom: 20rpx;
}

.content-left,
.content-right {
    flex: 1;
}

.info-row {
    display: flex;
    margin-bottom: 16rpx;
    
    .label {
        width: 140rpx;
        color: #666;
        font-size: 26rpx;
        flex-shrink: 0;
    }
    
    .value {
        color: #333;
        font-size: 26rpx;
        flex: 1;
        
        &.normal {
            color: #0A993B;
        }
        
        &.overdue {
            color: #ff4757;
        }
    }
}

.card-footer {
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
    display: flex;
    flex-direction: column;
    
    .timestamp {
        font-size: 24rpx;
        color: #999;
    }
    
    .card-actions {
        margin-top: 20rpx;
        display: flex;
        gap: 16rpx;
        .u-button {
            &:first-child {
                width: 160rpx;
                background: #0A993B;
                border-color: #0A993B;
                color: #fff;
            }
            
            &:nth-child(2) {
                width: 160rpx;
                background: #4CAF50;
                border-color: #4CAF50;
                color: #fff;
            }
            
            &:last-child {
                width: 160rpx;
                background: #ff4757;
                border-color: #ff4757;
                color: #fff;
            }
        }
    }
}

.empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;
}

.mine-navbar-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    
    z-index: 1;
}
</style>